<div
  *ngIf="isVisible"
  class="machine-report-modal"
  [ngClass]="{'opne-animation': isVisible}"
  cdkDrag>

  <div class="modal-head">
    <p class="head-title" cdkDragHandle>
      出价参考
    </p>
    <span class="modal-del" (click)="handleCancel()">
      <i nz-icon nzType="close" nzTheme="outline"></i>
    </span>
  </div>

  <div class="modal-body">
    <!-- 用户评估 -->
    <div class="modal-body-lf scrollbar-wrap">
      <p class="modal-body-title">
        <i nz-icon nzType="tags" nzTheme="outline" class="m-r-4"></i>用户评估
      </p>

      <ng-container *ngIf="[1, 3].includes(userEvaluation.orderWay);else templateText">
        <dl class="assess-dl">
          <dd>
            下单机型: 
            <span>{{ userEvaluation.umname || '-' }}</span>
            <i
              nz-icon
              nzType="copy"
              nzTheme="outline"
              class="m-l-8"
              nz-tooltip
              nzTooltipTitle="点击复制"
              (click)="copyText(userEvaluation.umname)"
            ></i>
          </dd>
          <dd>评估价: <span>{{ userEvaluation.uprc || '0' }}</span></dd>
          <dd>加价金额: <span>{{ userEvaluation.orderAprc || '0' }}</span></dd>
          <dd>下单抽奖: <span>{{ userEvaluation.cprc || '0' }}</span></dd>
          <dd>
            评估合计: <span>{{ (userEvaluation.uprc || 0) + (userEvaluation.orderAprc || 0) + (userEvaluation.cprc || 0) }}</span>
          </dd>
        </dl>

        <ul class="assess-ul">
          <li *ngFor="let item of userEvaluation?.ueval; let index = index;">
            <span class="assess-li-q">{{ index + 1 }}、{{ item?.cname || '---' }}</span>
            <span class="assess-li-a">{{ item?.oname || '---' }}</span>
          </li>
        </ul>
      </ng-container>
      <ng-template #templateText>批量下单: {{ userEvaluation.umname || '-' }}</ng-template>
    </div>

    <!-- 模拟评估 -->
    <div class="modal-body-rt scrollbar-wrap">
      <p class="modal-body-title">
        <i nz-icon nzType="tags" nzTheme="outline" class="m-r-4"></i>模拟评估
      </p>

      <!-- S 模拟评估 -->
      <div class="modal-wrap-rt p-b-40">
        <div class="select-model-wrap">
          <label>验机机型:</label>
          <nz-select
            nzShowSearch
            nzAllowClear
            nzServerSearch
            nzPlaceHolder="请输入机型名称"
            [nzShowArrow]="false"
            [nzFilterOption]="nzFilterOption"
            [(ngModel)]="modelId"
            (nzOnSearch)="searchModel($event)"
            (ngModelChange)="modelChange($event)">
            <ng-container *ngFor="let o of recycleModelOptions">
              <nz-option *ngIf="!isInputLoading" [nzLabel]="o?.name" [nzValue]="o?.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isInputLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i>
              数据加载中...
            </nz-option>
          </nz-select>
        </div>

        <div *ngIf="modelId; else emptyTemplate" class="model-count-wrap">
          <div>
            <!-- <div class="flexRow">
              <label>品牌:</label>
              <span>{{copyFormData.brandName}}</span>
            </div>
            <div class="flexRow">
              <label>系列:</label>
              <span>{{copyFormData.departmentName}}</span>
            </div>
            <div class="flexRow">
              <label>机型:</label>
              <span>{{copyFormData.typeName}}</span>
            </div>
            <div class="flexRow">
              <label>估价模版:</label>
              <span>{{copyFormData.templateName}}</span>
            </div>
            <div class="flexRow">
              <label>内部备注:</label>
              <span>{{copyFormData.remark}}</span>
            </div> -->
            <!--            <div class="flexRow">-->
            <!--              <label>二手基准价:</label>-->
            <!--              <span>￥{{copyFormData.usedBasePrice}}</span>-->
            <!--              <span class="m-l-10" *ngIf="!isNewDevice&&!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>-->
            <!--              <span class="m-l-10" *ngIf="fixedPriceResult.isFixedPrice">一口价：{{fixedPriceResult.price}}</span>-->
            <!--            </div>-->
            <!--            <div class="flexRow">-->
            <!--              <label>准新基准价:</label>-->
            <!--              <span>￥{{copyFormData.newBasePrice}}</span>-->
            <!--              <span class="m-l-10" *ngIf="isNewDevice&&!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>-->
            <!--              <span class="m-l-10" *ngIf="fixedPriceResult.isFixedPrice">一口价：{{fixedPriceResult.price}}</span>-->
            <!--            </div>-->
            <span *ngIf="mABP.checked">
              <span *ngIf="!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>
              <span *ngIf="fixedPriceResult.isFixedPrice">{{fixedPriceResult.price}}</span>
            </span>
          </div>

          <div class="flexRow" *ngIf="baseQuestion?.questionId">
            <label>基准:</label>{{questionIdToName(baseQuestion?.questionId, questionList)}}
          </div>
          <nz-table nzShowPagination="false" *ngIf="baseQuestion?.options.length"
                    #table [nzData]="baseQuestion?.options" style="margin-top: 8px">
            <thead>
            <tr>
              <th>选项名称</th>
              <th>二手基准价</th>
              <th>二手保底价</th>
              <th>准新基准价</th>
              <th>准新保底价</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let o of table.data" style="margin-top: 8px">
              <td
                style="max-width:400px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{optionIdToName(o['id'])}}</td>
              <td>{{o['usedPriceInfo']['basePrice']}}</td>
              <td>
                {{o['usedPriceInfo']['type'] === 'percentage' ? '百分比：&nbsp;&nbsp;&nbsp;' + o['usedPriceInfo']['price'] + '%' : '固定金额：' + o['usedPriceInfo']['price']}}
                <span class="preview" *ngIf="o['usedPriceInfo']['type']==='percentage'">
            ({{priceToFloor(o['usedPriceInfo']['basePrice'], o['usedPriceInfo']['price'])}})
          </span>
              </td>
              <td>{{o['newPriceInfo']['basePrice']}}</td>
              <td>
                {{o['newPriceInfo']['type'] === 'percentage' ? '百分比：&nbsp;&nbsp;&nbsp;' + o['newPriceInfo']['price'] + '%' : '固定金额：' + o['newPriceInfo']['price']}}
                <span class="preview" *ngIf="o['newPriceInfo']['type']==='percentage'">
            ({{priceToFloor(o['newPriceInfo']['basePrice'], o['newPriceInfo']['price'])}})
          </span>
              </td>
            </tr>
            </tbody>
          </nz-table>

          <div class="question" *ngFor="let question of copyQuestionList;let questionIndex=index">
            <div *ngIf="question.show">
              <div class="title" (click)="changeFold(question)">
          <span class="name">{{calcQuestionIndex(questionIndex)}}.{{question.questionName}}
            <span *ngIf="question.isRequired" style="color: red">*</span></span>
                <span class="result">{{getResult(question)}}</span>
                <i class="changeFoldBtn" nz-icon [nzType]="question.optionsFold?'right':'down'" nzTheme="outline"></i>
              </div>
              <div class="optionSingle" [ngStyle]="{display: question.optionsFold?'none':'block'}"
                   *ngIf="question.selectType===0">
                <nz-radio-group [(ngModel)]="question.value" class="optionRow" *ngFor="let option of question.options"
                                (ngModelChange)="singleChecked(questionIndex,$event)">
                  <label nz-radio [nzDisabled]="!option.selectAble" [nzValue]="option.id">
                    <div style="display: flex;flex-direction: row;align-items: center">
              <span
                style="display: inline-block;width: 400px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
              {{option.optionName}}
                <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                   nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                   nzTheme="outline"></i>
              </span>
                      <span *ngIf="isNewDevice&&mABP.checked">
                    {{option['newPriceInfo']['type'] === 'percentage' ?
                        '准新扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['newPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['newPriceInfo']['price']) + ')' :
                        '准新扣钱固定金额：' + option['newPriceInfo']['price']}}
              </span>
                      <span *ngIf="!isNewDevice&&mABP.checked">
                    {{option['usedPriceInfo']['type'] === 'percentage' ?
                        '二手扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['usedPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['usedPriceInfo']['price']) + ')' :
                        '二手扣钱固定金额：' + option['usedPriceInfo']['price']}}
              </span>
                      <span *ngIf="!mABP.checked">未选中基准价，无法预测价格。</span>
                    </div>
                    <span style="color: red" *ngIf="!option.selectAble"> 不可选原因：{{option.invalidCause}}</span>
                    <div *ngIf="option['questionId']" style="color: rgba(0,0,0,.3)">
                      选择此项后跳转到：{{questionIdToName(option['questionId'], copyQuestionList)}}</div>
                  </label>
                </nz-radio-group>
              </div>
              <div class="optionMultiple" [ngStyle]="{display: question.optionsFold?'none':'block'}"
                   *ngIf="question.selectType===1">
                <div class="optionRow" *ngFor="let option of question.options">
                  <label nz-checkbox [(ngModel)]="option.checked" [nzDisabled]="!option.selectAble"
                         (ngModelChange)="multipleChecked(questionIndex)">
                    <div style="display: flex;flex-direction: row;align-items: center">
              <span
                style="display: inline-block;width: 400px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
              {{option.optionName}}
                <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                   nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                   nzTheme="outline"></i>
              </span>
                      <span *ngIf="isNewDevice&&mABP.checked">
                    {{option['newPriceInfo']['type'] === 'percentage' ?
                        '准新扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['newPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['newPriceInfo']['price']) + ')' :
                        '准新扣钱固定金额：' + option['newPriceInfo']['price']}}
              </span>
                      <span *ngIf="!isNewDevice&&mABP.checked">
                    {{option['usedPriceInfo']['type'] === 'percentage' ?
                        '二手扣钱百分比：' + option['usedPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['usedPriceInfo']['price']) + ')' :
                        '二手扣钱固定金额：' + option['usedPriceInfo']['price']}}
              </span>
                      <span *ngIf="!mABP.checked">未选中基准价，无法预测价格。</span>
                    </div>
                    <span style="color: red" *ngIf="!option.selectAble"> 不可选原因：{{option.invalidCause}}</span></label>
                </div>
              </div>

            </div>
          </div>
        </div>
        <ng-template #emptyTemplate>
          <div class="p-t-45">
            <nz-empty nzNotFoundContent="请先选择机型"></nz-empty>
          </div>
        </ng-template>
      </div>
      <!-- E 模拟评估 -->
    </div>
  </div>
</div>
